import { useModel } from "@umijs/max"
import { Button, Modal } from "antd"
import React from "react"

const OfflineModal: React.FC<any> = ({}) => {
  const { offlineModalVisible } = useModel("produceModel")
  // 关闭浏览器窗口的函数
  const closeBrowser = () => {
    console.log("尝试关闭浏览器窗口")

    // 尝试多种方法关闭浏览器窗口
    try {
      // 尝试关闭父窗口或顶层窗口
      const parentWindow = window.parent || window.top || window
      parentWindow.close()

      // 尝试关闭顶层窗口
      const topWin = window.open("", "_top")
      if (topWin) {
        topWin.close()
      }

      // 尝试关闭当前窗口
      const selfWin = window.open("", "_self")
      if (selfWin) {
        selfWin.close()
      }

      // 如果上述方法都失败，尝试重定向到空白页
      setTimeout(() => {
        if (document.hasFocus()) {
          window.top.location.href = "about:blank"
          window.location.replace("about:blank")
        }
      }, 300)
    } catch (err) {
      console.error("自动关闭浏览器失败，请手动关闭", err)
      alert(
        "请手动关闭浏览器窗口，然后重新启动程序。\n\n您可以按Alt+F4或点击浏览器右上角的X按钮关闭窗口。"
      )
    }
  }

  // 处理确定按钮点击
  const handleOk = () => {
    closeBrowser() // 然后关闭浏览器
  }

  return (
    <Modal
      title="连接断开"
      open={offlineModalVisible}
      closable={false}
      maskClosable={false}
      keyboard={false}
      footer={[
        <Button key="ok" type="primary" onClick={handleOk}>
          确定
        </Button>
      ]}
    >
      <div style={{ fontSize: "16px", lineHeight: "1.6" }}>
        <p>程序已掉线，请重新开启程序。</p>
        <p>点击确定按钮将自动关闭浏览器窗口。</p>
      </div>
    </Modal>
  )
}

export default OfflineModal
